<template>
  <div class="login themebgcolor">
   <header-bar :text="title" :left="left" ></header-bar>
<div class="imgbg"></div>
<div class="login_content">
  <form>
  <input type="text" placeholder="请输入手机号" v-model="mobilephone" style="margin-bottom:25px;">
  <input type="password" placeholder="请输入密码" v-model="pwd">
  </form>
  </div>
  <div class="login_btn ">
    <button @click="login(mobilephone&&pwd)" class="" :class="{btnactive:mobilephone&&pwd}">登录</button>
    </div>
  <div class="login_forget">
    <div>
      <span>没有账号？</span><router-link to="/register">去注册</router-link>
    </div>
    <div>
      <span @click="forgetpwd" style="color:#fff;">忘记密码</span>
    </div>
  
</div>
  </div>
</template>
<script>
import { Header, Toast } from "mint-ui";
import { requestLogin } from "../api/api.js";
import util from "../assets/js/util.js";
import headerBar from "./main/header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
		msg: "",
		mobilephone: "",
		pwd: "",
		before: "",
		title: "登录",
        left: {
            status: true
        }
    };
  },
  components:{
	  headerBar
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  methods: {
    //20180727111054594346651
    login(v) {
      if (this.mobilephone == "") {
        Toast({
          message: "请输入手机号！",
          position: "bottom",
          duration: 5000
        });
      } else if (this.pwd == "") {
        Toast({
          message: "请输入密码！",
          position: "bottom",
          duration: 5000
        });
      } else if (v) {
        let para = {
          mobilephone: this.mobilephone,
          pwd: this.pwd
        };
        this.$ajaxPost("login", para).then(res => {
			if(res.code == 200){
				let id = "20180831101716216980155";
				util.setLocalStorage("token", res.token);
				util.setLocalStorage("userinfo", JSON.stringify(res.user));
				this.pageInfo.userinfo = res.user;
				this.$router.push({
					path: "/detail",
					query: {
					id: id
					}
				});
			}else{
				Toast({
					message: res.msg,
					position: "bottom",
					duration: 3000
				});
			}
			
        });
      } else {
        Toast({
          message: "请先输入手机号和密码！",
          position: "bottom",
          duration: 3000
        });
      }
    },
    forgetpwd() {
      this.$router.push({ path: "/forget1" });
      // if (this.mobilephone == "") {
      //   Toast({
      //     message: "请先输入手机号！",
      //     position: "bottom",
      //     duration: 3000
      //   });
      // } else {
      //   this.$router.push({ path: "/forget1?phone=" + this.mobilephone });
      // }
    }
  },
  mounted() {
    sessionStorage.clear();
    // console.log(this.$route.query.redirect);
    this.before = this.$route.query.redirect ? this.$route.query.redirect : "/";
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url("../../static/css/theme.less");
</style>

<style scoped>
@import url("../../static/css/login.css");
</style>
